<!DOCTYPE html>
<html>
<head>
	<title>MiniMap Demo</title>
	<meta charset="utf-8" />

	<link rel="stylesheet" href="./fullscreen.css" />

	<!-- Leaflet -->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet-src.js" type="text/javascript"></script>

	<!-- Leaflet Plugins -->
	<link rel="stylesheet" href="../src/Control.MiniMap.css" />
	<script src="../src/Control.MiniMap.js" type="text/javascript"></script>
  
    <!-- Extra data source -->
    <script src="local_pubs_restaurant_norway.js" type="text/javascript"></script>

</head>
<body>
		<div id="map" ></div>

	<script type="text/javascript">
	
		var map = new L.Map('map');
		var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
		var osmAttrib='Map data &copy; OpenStreetMap contributors';
		var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});
      
        function createPopUp(feature, layer) {
          var string = "";
          for (var k in feature.properties) {
              string += k + " : " + feature.properties[k] + "<br>"
          }
          layer.bindPopup(string);
        };

        var pubs1 = L.geoJson(pubsGeoJSON, {
          onEachFeature: createPopUp
        });
      
		map.addLayer(osm);
        map.addLayer(pubs1);
		map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
		
		//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls. This also goes for the GeoJSON layer!
		var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
        var pubs2 = L.geoJson(pubsGeoJSON, {
          pointToLayer: function (featuredata, latlng) {
            return new L.CircleMarker(latlng, {radius: 2});
          }
        });
      
        var layers = new L.LayerGroup([osm2, pubs2]);
      
		var miniMap = new L.Control.MiniMap(layers, { toggleDisplay: true }).addTo(map);
	</script>
</body>
</html>
